<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #demo1 {
        width: 400px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="demo1"></div>
    <script src="./echarts.min.js"></script>
    <script>
      // 初始化echarts
      const myEcharts = echarts.init(document.getElementById('demo1'))
      // 定义配置项
      const option = {
        title: {
          // 标题的内容
          text: '柱形图',
          left: 'center',
        },
        // x轴
        xAxis: {
          // x轴要渲染的具体内容
          data: ['韩信', '李白', '吉吉国王', '百里玄策'],
        },
        // y轴
        yAxis: {
          // 显示坐标轴的轴线
          axisLine: {
            show: true,
          },
          // 显示刻度线
          axisTick: {
            show: true,
          },
        },
        // 系列：要渲染的数据
        series: {
          type: 'bar',
          data: [200, 298, 234, 65],
        },
      }
      // 渲染图表
      myEcharts.setOption(option)
    </script>
  </body>
</html>
